@use 'sass:map';

// {bem_b,bem_e,bem_m,VueAndNvueStyleAttr,when}
@use './mixin/mixins.scss' as *;
@use './mixin/function.scss' as *;
// // {set-component-css-var}
@use './mixin/_var.scss' as *;
// // {$badge}
@use './common/var.scss' as *;

@import 'common/index.scss';

@include bem_b(refresh) {
	height: 100%;
	@include bem_e(container) {
		/* #ifndef APP-NVUE */
		display: flex;
		height: 100%;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		&-left {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			overflow: hidden;
			/* #ifdef MP-ALIPAY */
			margin-top: -4rpx;
			/* #endif */
			&__image {
				transition-duration: 0.2s;
				transition-property: transform;
				@include when(line-loading) {
					/* #ifndef APP-NVUE */
					animation: loading-flower 1s steps(12) infinite;
					/* #endif */

				}
				@include when(top) {
					transform: rotate(0deg);
				}
				@include when(down) {
					transform: rotate(180deg);
				}
				@include when(rpx) {
					/* #ifndef APP-NVUE */
					width: 34rpx;
					height: 34rpx;
					overflow: hidden;
					/* #endif */
				}
				@include when(px) {
					/* #ifndef APP-NVUE */
					width: 17px;
					height: 17px;
					overflow: hidden;
					/* #endif */
				}
			}
			/* #ifdef APP-NVUE */
			&__loading {
				@include when(ios-rpx) {
					width: 40rpx;
					height: 40rpx;
				}
				@include when(ios-px) {
					width: 20px;
					height: 20px;
				}
				@include when(android-rpx) {
					width: 34rpx;
					height: 34rpx;
				}
				@include when(android-px) {
					width: 17px;
					height: 17px;
				}
			}
			/* #endif */
		}
		&-right {
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			&__text{
				@include when(rpx) {
					margin-top: 10rpx;
					font-size: 26rpx;
				}
				@include when(px) {
				margin-top: 5px;
				font-size: 13px;
				}
			}
		}
	}
}
